<template>
  <div>
    <div class="box">

    </div>
    <div class="box">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="userId"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="登录账号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="用户昵称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="realName"
            label="真实姓名">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="userVip"
            :formatter="formatterVip"
            label="会员状态">
          </el-table-column>
          <el-table-column
            prop="company"
            label="公司">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="注册时间">
          </el-table-column>

<!--          <el-table-column label="操作" width="280">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
          </el-table-column> -->
        </el-table>
    </div>

    <div style="margin: 10px;">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageNum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {getUserByPage} from '@/api/news.js'
  export default {
    name: 'Resource',
    data() {
      return {
        tableData: [],
        total: 0,
        pageSize: 10,
        pageNum: 1,
      }
    },
    mounted() {
      this.loadList()
    },
    methods: {
      loadList() {
        let param = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          id: 1
        }
        getUserByPage(param).then(res => {
          console.log('getUserByPage', res);
          if(res.code == 200) {
            this.tableData = res.data.records
            this.pageNum = res.data.current
            this.pageSize = res.data.size
            this.total = res.data.total
          }
        })
      },
      handleDelete(index, row) {
        console.log('handleDelete', row)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNum = val
        this.loadList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.loadList()
      },
      formatterVip(row, column) {
        let label = '会员';
        if(row.userVip == 2) {
          label = '正在审核';
        }
        return label;
      },
      formatterFileSize(row, column) {
        let fileSize = row.fileSize
        var arrUnit = ["B", "K", "M", "G", "T", "P"],
        		baseStep = 1024,
        		unitCount = arrUnit.length,
        		unitIndex = 0;
        	while(fileSize >= baseStep && unitIndex < unitCount - 1){
        		unitIndex++;
        		fileSize /= baseStep;
        	}
        	fileSize = fileSize.toFixed(2);
        	return fileSize + " " + arrUnit[unitIndex];
      }
    }
  }
</script>

<style>
</style>
